<template>
	<view class="container">
		<view class="background">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
			<view class="circle circle-3"></view>
		</view>

		<view class="form-card">
			<view class="form-header">
				<text class="title">欢迎登录</text>
				<text class="subtitle">请输入您的账号信息</text>
			</view>

			<view class="form-content">
				<view class="input-group">
					<!-- 登录账户 -->
					<view class="input-item">
						<text class="input-icon">👤</text>
						<input class="input" v-model="loginAccount" placeholder="请输入登录账户"
							placeholder-class="placeholder" />
						<view class="input-clear" v-if="loginAccount" @click="loginAccount = ''">
							<text class="clear-icon">×</text>
						</view>
					</view>

					<!-- 密码 -->
					<view class="input-item">
						<text class="input-icon">🔒</text>
						<input class="input" v-model="password" password placeholder="请输入密码"
							placeholder-class="placeholder" />
						<view class="input-clear" v-if="password" @click="password = ''">
							<text class="clear-icon">×</text>
						</view>
					</view>
				</view>

				<!-- 错误提示 -->
				<view class="error-tip" v-if="errorMessage">
					<text class="error-icon">⚠️</text>
					<text class="error-text">{{ errorMessage }}</text>
				</view>

				<button class="login-btn" type="primary" @click="handleLogin" :disabled="loading">
					<text class="btn-text">{{ loading ? '登录中...' : '登录' }}</text>
				</button>

				<view class="link-group">
					<text class="link-text">没有账号?</text>
					<navigator url="/pages/Register/Register" class="link">立即注册</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginAccount: '', // 登录账户
				password: '', // 密码
				loading: false, // 加载状态
				errorMessage: '' // 错误信息
			}
		},
		onLoad(options) {
			// 检查是否已登录
			this.checkLoginStatus();
		},
		methods: {
			// 检查登录状态
			checkLoginStatus() {
				const token = uni.getStorageSync('token');
				const userInfo = uni.getStorageSync('userInfo');

				if (token && userInfo) {
					// 已登录，跳转到首页
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/tobBar/tobcomponent/tobcomponent'
						});
					}, 500);
				}
			},

			// 表单验证
			validateForm() {
				if (!this.loginAccount.trim()) {
					this.errorMessage = '请输入登录账户';
					return false;
				}

				if (!this.password.trim()) {
					this.errorMessage = '请输入密码';
					return false;
				}

				if (this.password.length < 6) {
					this.errorMessage = '密码长度至少6位';
					return false;
				}

				this.errorMessage = '';
				return true;
			},

			// 真实登录处理
			async handleLogin() {
				// 1. 表单验证
				if (!this.validateForm()) {
					return;
				}

				this.loading = true;
				this.errorMessage = '';

				try {
					// 2. 调用云函数登录
					const res = await uniCloud.callFunction({
						name: 'login',
						data: {
							account: this.loginAccount,
							password: this.password
						}
					});

					console.log('登录响应:', res);

					const {
						code,
						msg,
						data
					} = res.result;

					if (code === 200 && data) {
						// 登录成功
						// 存储登录信息
						uni.setStorageSync('token', data.token);
						uni.setStorageSync('userInfo', data.userInfo);

						uni.showToast({
							title: msg || '登录成功',
							icon: 'success',
							duration: 1500
						});

						// 延迟跳转，让用户看到成功提示
						setTimeout(() => {
							this.navigateAfterLogin();
						}, 1500);

					} else {
						// 登录失败
						this.errorMessage = msg || '登录失败，请检查账户和密码';
						uni.showToast({
							title: msg || '登录失败',
							icon: 'none'
						});
					}

				} catch (error) {
					console.error('登录错误:', error);
					this.errorMessage = '登录失败，请检查网络连接或稍后重试';
					uni.showToast({
						title: '登录失败，请稍后重试',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},

			// 登录成功后跳转
			navigateAfterLogin() {
				// 获取页面栈，判断是否需要返回上一页
				const pages = getCurrentPages();
				if (pages.length > 1) {
					// 从其他页面跳转过来，返回上一页
					uni.navigateBack();
				} else {
					// 直接进入登录页，跳转到首页
					uni.switchTab({
						url: '/pages/tobBar/tobcomponent/tobcomponent'
					});
				}
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		background: linear-gradient(135deg, #007AFF 0%, #00C6FF 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
		position: relative;
	}

	.background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	.circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.15);
	}

	.circle-1 {
		width: 400rpx;
		height: 400rpx;
		top: -150rpx;
		right: -150rpx;
		background: rgba(255, 255, 255, 0.1);
	}

	.circle-2 {
		width: 300rpx;
		height: 300rpx;
		bottom: 80rpx;
		left: -100rpx;
	}

	.circle-3 {
		width: 200rpx;
		height: 200rpx;
		bottom: -50rpx;
		right: 120rpx;
		background: rgba(255, 255, 255, 0.12);
	}

	.form-card {
		background: rgba(255, 255, 255, 0.98);
		border-radius: 30rpx;
		padding: 60rpx 50rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 122, 255, 0.15);
		width: 100%;
		max-width: 600rpx;
		position: relative;
		z-index: 2;
		border: 1rpx solid rgba(255, 255, 255, 0.2);
	}

	.form-header {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.title {
		display: block;
		font-size: 48rpx;
		font-weight: 700;
		color: #007AFF;
		margin-bottom: 16rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #666;
	}

	.input-group {
		margin-bottom: 40rpx;
	}

	.input-item {
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 20rpx;
		padding: 0 30rpx;
		margin-bottom: 24rpx;
		border: 2rpx solid #e9ecef;
		transition: all 0.3s ease;
		height: 100rpx;
	}

	.input-item:focus-within {
		border-color: #007AFF;
		background: #ffffff;
		box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
	}

	.input-icon {
		font-size: 36rpx;
		margin-right: 20rpx;
		color: #007AFF;
		width: 40rpx;
		text-align: center;
		flex-shrink: 0;
	}

	.input {
		flex: 1;
		height: 100rpx;
		font-size: 30rpx;
		color: #333;
	}

	.placeholder {
		color: #999;
		font-size: 28rpx;
	}

	.input-clear {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: #e0e0e0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
		flex-shrink: 0;
	}

	.clear-icon {
		font-size: 28rpx;
		color: #666;
		font-weight: bold;
	}

	/* 错误提示 */
	.error-tip {
		display: flex;
		align-items: center;
		padding: 16rpx 20rpx;
		background: #ffebee;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		border-left: 4rpx solid #f44336;
	}

	.error-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
		color: #f44336;
	}

	.error-text {
		font-size: 26rpx;
		color: #d32f2f;
		flex: 1;
	}

	.login-btn {
		background: linear-gradient(135deg, #007AFF 0%, #00C6FF 100%);
		border: none;
		border-radius: 20rpx;
		height: 96rpx;
		line-height: 96rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #ffffff;
		margin-bottom: 40rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 122, 255, 0.3);
		position: relative;
		overflow: hidden;
	}

	.login-btn[disabled] {
		background: #ccc;
		box-shadow: none;
		opacity: 0.6;
	}

	.btn-text {
		color: #ffffff;
		font-weight: 600;
	}

	.link-group {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.link-text {
		font-size: 26rpx;
		color: #666;
	}

	.link {
		font-size: 26rpx;
		color: #007AFF;
		font-weight: 600;
	}

	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.container {
			padding: 20rpx;
		}

		.form-card {
			padding: 50rpx 40rpx;
		}

		.title {
			font-size: 42rpx;
		}

		.circle-1 {
			width: 300rpx;
			height: 300rpx;
			top: -100rpx;
			right: -100rpx;
		}

		.circle-2 {
			width: 200rpx;
			height: 200rpx;
			bottom: 60rpx;
			left: -80rpx;
		}

		.circle-3 {
			width: 150rpx;
			height: 150rpx;
			bottom: -40rpx;
			right: 80rpx;
		}
	}

	/* 深色模式适配 */
	@media (prefers-color-scheme: dark) {
		.form-card {
			background: rgba(30, 30, 30, 0.98);
			border-color: rgba(255, 255, 255, 0.1);
		}

		.title {
			color: #4D9EFF;
		}

		.subtitle {
			color: #ccc;
		}

		.input-item {
			background: rgba(255, 255, 255, 0.1);
			border-color: rgba(255, 255, 255, 0.1);
		}

		.input {
			color: #fff;
		}

		.placeholder {
			color: #888;
		}

		.input-clear {
			background: rgba(255, 255, 255, 0.2);
		}

		.clear-icon {
			color: #ccc;
		}

		.error-tip {
			background: rgba(244, 67, 54, 0.1);
			border-left-color: #f44336;
		}

		.error-text {
			color: #ff8a80;
		}

		.link-text {
			color: #ccc;
		}

		.link {
			color: #4D9EFF;
		}

		.link-group {
			border-top-color: rgba(255, 255, 255, 0.1);
		}
	}
</style>